<template>
    <div id="checkbox">
        <h1>多选</h1>
        <div class="for" v-for="it in checkbox" :key="it.id">
            <input type="checkbox" :id="it.id" :value="it.value" v-model="checkedNames">
            <label :for="it.id" >{{it.value}}</label>
            <br>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                checkbox: {
                    checkbox1: {
                        id: "1",
                        value: "2",
                    },
                    checkbox2: {
                        id: "3",
                        value: "4",
                    },
                },
                checkedNames: []
            }
        }

    }
</script>

<style lang="less" scoped>
    #checkbox {
        width: 100%;
        height: 100%;
        border-bottom: 1px solid #bbb;
        padding-bottom: 1vh;

        h1 {
            font-size: 15px;
            font-weight: 500;
            padding: 1vw;
            margin-left: 2vw;
        }

        .for {
            font-size: 15px;
            font-weight: 500;
            margin-top: 1vh;
            margin-left: 2vw;
            label{
                margin-left: 1vw;

            }
        }
    }
</style>